<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>学生列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="5">
            <el-col :span="8">
                <el-input placeholder="请输入查询关键字" v-model="keywords"/>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="success" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
            </el-col>

        </el-row>

        <el-card class="box-card">
            <el-table
                    :data="students"
                    style="width: 100%">
                <el-table-column
                        label="学号"
                        prop="sid"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="sname"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="性别"
                        prop="sex"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="年龄"
                        prop="age"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="住址"
                        prop="addr"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="所在班级"
                        prop="cname"
                        width="180">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit"  @click="handleEdit(scope.row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页导航-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--学生的添加与修改的对话框 -->
        <add-or-update ref="addOrUpdate" v-if="addOrUpdateVisible" @refreshStudentData="search"></add-or-update>
    </div>
</template>

<script>
    //导入操作学生的API方法
    import {findAllStudents, findByPage, search, save,deleteStudent} from "../../api/student";
    //引入学生添加或修改组件
    import AddOrUpdate from './Student-Add-or-Update'
    export default {
        name: "Student",
        data() {
            return {
                students: [],
                keywords: '',        //查询关键字
                page: 1,             //当前页
                pageSize: 5,         //每页大小
                total: 100,           //总记录数
                addOrUpdateVisible:false  //控制组件的显示与隐藏
            }
        },
        components:{AddOrUpdate},    //引入组件
        methods: {
            //1.查询所有的学生
            findAllStudents() {
                findAllStudents().then((data) => {
                    this.students = data.data;
                })
            },
            //2.pageSize改变时触 发
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                console.log(`每页 ${pageSize} 条`);
            },
            //3.page改变时触 发
            handleCurrentChange(page = 1) {
                this.page = page;
                //console.log(`当前页: ${page}`);
                //3.1_向后台发出分页查询的请求
                search(page, this.pageSize, this.keywords).then(({data}) => {
                    console.log(data)
                    //3.2_更新总记录数及每页的记录集合(这里的data就是后台的pageResult)
                    this.total = data.total;
                    this.students = data.rows;
                })
            },
            //4.条件查询带分页
            async  search() {
                //改造成：ES7的async与await(只要方法返回的是Promise都可以这样改造)
                const {data: rs} = await search(this.page, this.pageSize, this.keywords);
                console.log(rs)
                //4.1_更新总记录数及每页的记录集合(这里的data就是后台的pageResult)
                this.total = rs.total;
                this.students = rs.rows;
            },

            //5.修改学生界面
            handleEdit( row) {
                console.log(row);
                //5.1 显示对话框
                this.addOrUpdateVisible = true;
                //5.2 调用子组件add-or-update中的init方法，进行子组件的初始化操作
                this.$nextTick(()=>{
                    this.$refs.addOrUpdate.init(row);
                })

            },
            //9.根据学号删除学生
            handleDelete(stud){
                this.$confirm(`此操作要删除学生${stud.sname}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { //代表点击了"确定"按钮
                    deleteStudent(stud.sid).then(({data:rs})=>{
                        if(rs.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                duration:1500,
                                onClose:()=>{       //此消息框结束时，刷新页面
                                    this.handleCurrentChange();
                                }
                            });
                        }else{
                            this.$message({
                                type: 'info',
                                message: `删除失败，原因是：${rs.message}`
                            });
                        }
                    })
                })
            },
        },
        created() {     //到这个 钩子函数，可以访问data及methods中的属性及方法
            //1.查询所有班级
            //this.findAllClasses();
            //2.进行分页带条件查询学生列表
            this.handleCurrentChange();
        }
    }
</script>

<style scoped>

</style>